.signup__step.is-from-url {
	// Create room for floating support button for logged in users.
	margin-bottom: 64px;
}

// The containing element
.import-url__wrapper {
	padding: 0;
	@include elevation ( 0 );
	border-radius: 3px;
	max-width: 640px;
	margin: auto;
}

// Actual form input for typing the URL
.import-url__wrapper .import-url__url-input {
	border: none;
	border-radius: 3px;
	padding: 10px 14px;

	@include breakpoint-deprecated( '<660px' ) {
		padding: 14px;
	}
}

.import-url__wrapper .import-url__url-input-message {
	max-width: 640px;
	margin: 16px auto;
}


.import-url {
	&__form {
		position: relative;
	}

	&__submit-button {
		position: absolute;
		top: 2px;
		right: 2px;

		@include breakpoint-deprecated( '<660px' ) {
			top: 1px;
			right: 1px;
		}
	}

	&__example {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		margin-bottom: 48px;
		position: relative;

		& > * {
			padding-left: 20px;
			padding-right: 20px;
		}
	}

	&__example-urls {
		color: var( --color-text-inverted );
		list-style: none;
		margin: 1em 0 1.5em;
	}

	&__example-url {
		font-family: monospace;
		font-size: $font-body-small;
		color: var( --color-text-inverted );

		&:first-of-type {
			padding-top: 8px;
		}
	}

	&__escape {
		color: var( --color-text-inverted );
		padding: 0 15px 24px;
		text-align: center;

		a {
			color: var( --color-text-inverted );
			text-decoration: underline;

			&:hover {
				color: var( --color-neutral-0 );
			}
		}

		.button {
			vertical-align: middle;
		}
	}
}

.import-url__notice-placeholder {
	height: 47px;
	margin: 16px auto;
}
